<template>
  <div class="box-map">
    <div class="arcgis map" id="ArcGisEsri"></div>
    <div class="btn-list">
      <button class="btn" @click="openPopup">打开弹层</button>
      <button class="btn" @click="closePopup">关闭弹层</button>
      <button class="btn" @click="addMarkers">新增标记</button>
      <button class="btn" @click="delMarkers">删除标记</button>
      <button class="btn" @click="delMarker">根据id删除标记</button>
      <button class="btn" @click="imageMarker">图片标记</button>
      <button class="btn" @click="textMarker">文本标记</button>
    </div>
  </div>
</template>

<script>
import { loadModules } from "esri-loader";
export default {
  name: "index",
  data() {
    return {
      map: null,
      mapView: null,
      Graphic: null,
      markers: [],
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    async initMap() {
      const [Map, MapView, VectorTileLayer, Polygon, Graphic] =
        await loadModules(
          [
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/VectorTileLayer",
            "esri/geometry/Polygon",
            "esri/Graphic",
          ],
          {
            css: true,
            //   version: "3.70",
          }
        );
      this.Graphic = Graphic;

      const vectorTileLayer = new VectorTileLayer({
        url: "https://basemaps.arcgis.com/arcgis/rest/services/OpenStreetMap_v2/VectorTileServer",
      });

      this.map = new Map({
        layers: [vectorTileLayer],
      });
      this.mapView = new MapView({
        container: "ArcGisEsri",
        map: this.map,
        center: [114.296173, 30.592868],
        zoom: 10,
      });
      this.setMapConstraints(Polygon);
      this.initWidgets();

      this.mapView.on("click", (e) => {
        const { x, y } = e;
        this.mapView.hitTest({ x, y }).then((res) => {
          if (res.results.length) {
            const graphic = res.results[0].graphic;
            if (graphic) {
              const msg = `点击了${graphic.attributes.id}标记`;
              window.alert(msg);
            }
          }
        });
      });
    },
    // 初始化地图控件
    async initWidgets() {
      const [Compass, Print] = await loadModules([
        "esri/widgets/Compass",
        "esri/widgets/Print",
      ]);
      this.mapView.ui.add(new Compass({ view: this.mapView }), "bottom-left");
      this.mapView.ui.add(
        new Print({
          view: this.mapView,
          printServiceUrl:
            "https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task",
        }),
        "top-left"
      );
      this.mapView.ui.move("zoom", "bottom-right");
    },
    // 文本标记
    textMarker() {
      this.mapView.graphics.add(
        new this.Graphic({
          geometry: {
            type: "point",
            longitude: 114.296173,
            latitude: 30.592868,
          },
          symbol: {
            color: "red",
            type: "text",
            haloColor: "yellow",
            haloSize: "1px",
            text: "我是文本标记",
            font: {
              size: 14,
              family: "sans-serif",
            },
          },
        })
      );
    },
    // 图片标记
    imageMarker() {
      this.mapView.graphics.add(
        new this.Graphic({
          geometry: {
            type: "point",
            longitude: 114.296173,
            latitude: 30.592868,
          },
          symbol: {
            type: "picture-marker",
            url: "/assets/vue.png",
            width: 30,
            height: 30,
            angle: 180, // 旋转角度
          },
          attributes: {
            id: "imgMarker", // 唯一标识
          },
          // popupTemplate: {
          //   title: "我是弹层标题",
          //   content: "我是弹层内容",
          // },
        })
      );
    },

    // 新增标记
    addMarkers() {
      const markers = [
        new this.Graphic({
          geometry: {
            type: "point",
            longitude: 114.296173,
            latitude: 30.592868,
          },
          symbol: {
            type: "simple-marker",
            style: "square",
            color: "blue",
            size: "8px",
            outline: {
              color: [255, 255, 0],
              width: 3,
            },
          },
          attributes: {
            id: "marker1", // 唯一标识
          },
        }),
        new this.Graphic({
          geometry: {
            type: "point",
            longitude: 114.105163,
            latitude: 30.592768,
          },
          symbol: {
            type: "simple-marker",
            style: "square",
            color: "blue",
            size: "8px",
            outline: {
              color: [255, 255, 0],
              width: 3,
            },
            attributes: {
              id: "marker2", // 唯一标识
            },
          },
        }),
      ];
      this.markers = markers;
      // 怎么给这两个标记添加唯一标识，我需要一个删除方法根据唯一标识删除
      this.mapView.graphics.addMany(markers);
    },
    // 删除全部标记
    delMarkers() {
      this.mapView.graphics.removeAll();
    },
    // 删除标记
    delMarker() {
      if (this.markers.length) {
        this.mapView.graphics.remove(this.markers[0]);
        this.markers.shift();
      }
    },
    // 关闭弹层
    closePopup() {
      this.mapView.popup.visible = false;
    },

    // 打开弹层
    openPopup() {
      this.mapView.popup.title = "标题";
      this.mapView.popup.content = "内容";
      this.mapView.popup.location = {
        longitude: 114.296173,
        latitude: 30.592868,
      };
      this.mapView.popup.visible = true;
      console.log(this.mapView.popup);
    },

    // 设置地图边界限制
    setMapConstraints(Polygon) {
      const chinaBoundary = new Polygon({
        // 中国边界 简易版的
        rings: [
          [
            [73.560833, 3.828125],
            [135.087891, 3.828125],
            [135.087891, 53.565427],
            [73.560833, 53.565427],
            [73.560833, 3.828125],
          ],
        ],
        spatialReference: { wkid: 4326 },
      });

      this.mapView.constraints = {
        geometry: chinaBoundary,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.box-map {
  width: 100%;
  height: 100%;
  position: relative;
}
.map {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
}

.btn-list {
  width: auto;
  height: auto;
  position: absolute;
  right: 15px;
  top: 15px;
  z-index: 5;
  display: flex;
  flex-flow: column;
  .btn {
    display: block;
  }
}
</style>
